<template>
  <div>
    <div class="header">
      <el-menu
        router
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/weight">体重明细</el-menu-item>
        <el-menu-item index="/zichan">资产明细</el-menu-item>
        <el-menu-item index="/touzi">投资明细</el-menu-item>
        <el-menu-item index="/liushui">花销明细</el-menu-item>
      </el-menu>

      <div class="user">
        你好：{{ username }}&emsp;
        <el-button type="info" size="mini" @click="logout" round
          >注销</el-button
        >
      </div>
    </div>
    <div class="admin4">

      <select v-model="month1" style="width:100px;height: 20px;margin-top: 5px;margin-bottom: 5px;margin-left: 10px">
        <option value="">支付宝花销时间</option>
        <option v-for="item in zhifubaoTime" :key="item" v-bind:value="item" v-text="item" ></option>
      </select>
      <input type="text" v-model="zhifubao" placeholder="支付宝花销" style="width:80px"/>
      <button @click="submit1">提交</button><br />


      <select v-model="month2" style="width:100px;height: 20px;margin-top: 5px;margin-bottom: 5px;margin-left: 10px">
        <option value="">微信花销时间</option>
        <option v-for="item in weixinTime" :key="item" v-bind:value="item" v-text="item" ></option>
      </select>
      <input type="text" v-model="weixin" placeholder="微信花销" style="width:80px"/>
      <button @click="submit2">提交</button><br />

      <input type="text" v-model="num" placeholder="查询条数(默认15条)" style="width:120px">
      <button @click="get_data">查询</button>
      <div >
        <table border="1px">
          <tr>
            <td width="160px">时间</td>
            <td width="100px">支付宝</td>
            <td width="100px">微信</td>
            <td width="100px">总花销</td>
          </tr>
          <tr class="tr">
            <td>{{sum_time}}</td>
            <td>{{sum_zhifubao}}</td>
            <td>{{sum_weixin}}</td>
            <td>{{sum_money}}</td>
          </tr>
          <tr v-for="(item, i) in data" :key="i">
            <td>{{ item.month }}</td>
            <td>{{ item.zhifubao }}</td>
            <td>{{ item.weixin }}</td>
            <td>{{ item.money}}</td>
            
          </tr>
        </table>
      </div>
      <div class="right-bar4">
        <div id="test_app">
          <!--echarts的容器-->
          <div id="main" style="width: 80%; height: 500px; color: weight"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 前端写入
      username: "",
      zhifubao: "",
      weixin: "",
      month1:"",
      month2:"",
      num: "",
      charts: "",
      // 后端获取
      data: [],
      moneyData: [], //数据
      timeData:[], //时间数据
      weixinTime:[], //微信时间数据
      zhifubaoTime:[], //支付宝时间数据
      sum_time:"",
      sum_zhifubao:"",
      sum_weixin:"",
      sum_money:""
    };
  },
  created() {
    this.active = this.$route.query.active;
  },
  methods: {
    // 判断用户是否登录
    getuser() {
      if (
        localStorage.getItem("username") == "" ||
        localStorage.getItem("username") == null
      ) {
        this.$router.push({ path: "/" });
      } else {
        this.username = localStorage.getItem("username");
      }
    },
    // 退出登录
    logout() {
      localStorage.removeItem("username");
      this.$router.push({ path: "/" });
    },
    // 支付宝提交
    submit1() {
      Axios.post("/user/write_liushui_zhifubao/", {
        user_id: localStorage.getItem("id"),
        zhifubao: this.zhifubao,
        month:this.month1,
      })
        .then((resp) => {
          if (resp.data.code == 200) {
            alert(resp.data.msg);
            this.zhifubao = "",
            this.month1 = "",
            this.get_data();
          } else {
            alert(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 微信提交
    submit2() {
      Axios.post("/user/write_liushui_weixin/", {
        user_id: localStorage.getItem("id"),
        weixin: this.weixin,
        month:this.month2,
      })
        .then((resp) => {
          if (resp.data.code == 200) {
            alert(resp.data.msg);
            this.weixin = "",
            this.month1 = "",
            this.get_data();
          } else {
            alert(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取
    get_data() {
      Axios.get("/user/get_liushui/", {
        params: { user_id: localStorage.getItem("id"), num: this.num },
      })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.data = resp.data.data;
            this.timeData = resp.data.timedata;
            this.moneyData = resp.data.moneydata;
            this.weixinTime = resp.data.weixintime;
            this.zhifubaoTime = resp.data.zhifubaotime;
            this.sum_time = resp.data.sum_time;
            this.sum_zhifubao = resp.data.sum_zhifubao;
            this.sum_weixin = resp.data.sum_weixin;
            this.sum_money = resp.data.sum_money;

            this.$nextTick(function () {
              this.drawLine("main");
                });
          } else {
            alert(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 折线图
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          left: "40%",
          top: "0%",
          text: "花销明细",
          textStyle: {
            fontWeight: "normal",
            color: "white", //标题颜色
          },
        },
        tooltip: {
          trigger: "axis",
        },

        grid: {
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: "16",
            },
            interval: 0,
            rotate: 45,
          },
          data : this.timeData,//x坐标的名称
          

        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          min:0,
          max:30000,
          splitNumber: 10, //纵坐标数
          interval: 2000, //强制设置坐标轴分割间隔
          //  改变y轴颜色
         axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: "16",
            },
          },
        },

        series: [
          {
            type: "bar", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)", //改变折线颜色
              },
            },
            data : this.moneyData,
          },
        ],
      });
    },
  },
  mounted() {
    this.getuser();
    this.get_data();
    
  },
};
</script>

<style >
.admin4 {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/1.jpg");
  background-size: 100% 100%;
  position: fixed;
  line-height: 150%;
  padding-top: 80px;
  top: 58px;
  left: 0px;
  opacity: 0.9;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
.right-bar4 {
  top: 200px;
  float: right;
  right: -13%;
  width: 70%;
  height: 100%;
  position: absolute;  
  overflow: auto;
  color: white;
}
.tr{
  background-color: rgba(34, 45, 94, 0.61);
}
</style>
